<template>
	<view class="lottery">
		<view class="lottery_head">
			<view class="back" @click="navigateBack()">
			</view>
			<view class="them">
				淘气游App 全新改版上线
			</view>
			<view class="flex" style="justify-content: space-around;align-items: center;">
				<view class="them_dec">
					每位玩家可获得一次抽奖机会 最高得1888买号优惠券
				</view>
				<button class="lote_btn">立即抽奖</button>
			</view>

		</view>
		<view class="lottery_content">
			<view class="lottery_title">
				活动规则
			</view>
			<view class="lottery_rule">
				<view class="rule_item flex	">
					<view class="num">01</view>
					<view>新版淘气游注册用户可获得一次抽奖机会，中奖金额可在 购买账号时直接减免。</view>
				</view>
				<view class="rule_item flex	">
					<view class="num">02</view>
					<view>本活动不与其他优惠共同使用。</view>
				</view>
				<view class="rule_item flex	">
					<view class="num">03</view>
					<view>优惠卷有效期12个月，过期则作废。</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onPageScroll(e) {

		},
		onLoad() {

		},
		onShow() {},
		methods: {

		}
	}
</script>
<style>
	page {
		background-color: #F7F8FA;
	}
</style>
<style lang="scss" scoped>
	.lottery {
		.lottery_head {
			height: 430rpx;
			background: url(~@/static/active/bg@2x.png) no-repeat;
			background-size: 100%;
			padding-top: 100rpx;
			padding-left: 25rpx;
			.back {
	
				display: block;
				height: 30px;
				width: 30px;
				background: url(~@/static/account/icon_back@2x.png) no-repeat;
				background-size: 100%;
			}

			.them {
				margin-top: 50rpx;
				margin-bottom: 45rpx;
				width: 264rpx;
				height: 104rpx;
				font-family: DFPHaiBaoW12-GB, DFPHaiBaoW12-GB;
				font-weight: 400;
				font-size: 44rpx;
				line-height: 52rpx;
				-webkit-text-stroke: 1px #FF740F;
				// 文字渐变颜色
				background: linear-gradient(#FFF579 0% 35%, #FAFFF8 55% 100%);
				background-clip: text;
				-webkit-background-clip: text;
				/* Safari/Chrome */
				-webkit-text-fill-color: transparent;
				/* Safari/Chrome */
				color: transparent;
			}

			.them_dec {
				width: 312rpx;
				height: 68rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FF971E;
				line-height: 28rpx;
			}

			.lote_btn {
				font-weight: 800;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 110rpx;
				width: 272rpx;
				height: 110rpx;
				text-align: left;
				text-indent: 10rpx;
				background: url(~@/static/active/button@2x.png) no-repeat;
				background-size: 100%;
			}
		}

		.lottery_content {
			background: #FFFFFF;
			margin-top: 35rpx;
			position: relative;
			height: 70vh;

			&::after {
				content: "";
				position: absolute;
				top: -30rpx;
				left: 0;
				right: 0;
				width: 100%;
				height: 30rpx;
				background-color: #FFFFFF;
				border-radius: 60rpx 60rpx 0px 0rpx;
			}
		}

		.lottery_title {
			margin: 0 auto;
			width: 334rpx;
			height: 70rpx;
			background: url(~@/static/active/title_bg@2x.png) no-repeat;
			background-size: 100%;
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFF1A3;
			line-height: 63rpx;
			letter-spacing: 2px;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
			text-align: center;
		}

		.lottery_rule {
			font-weight: 500;
			font-size: 24rpx;
			color: #6C6C6C;
			line-height: 28rpx;
			margin-top: 35rpx;

			.rule_item {
				padding-bottom: 25rpx;

				>view:nth-child(2) {
					width: 80%;
					padding: 5rpx 35rpx;
				}

				.num {
					width: 68rpx;
					height: 74rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #2C180A;
					line-height: 70rpx;
					text-align: center;
					background: url(~@/static/active/sort_bg@2x.png) no-repeat bottom;
					background-size: 100%;
				}
			}
		}
	}
</style>
